<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Path2D对象</title>
</head>
<body>
<canvas width="300" height="300" style="background-color: #9E9E9E"></canvas>
<script>
    var canvas = document.getElementsByTagName('canvas')[0];
    var ctx = canvas.getContext('2d');

    var rectangle = new Path2D();
    rectangle.rect(10, 10, 50, 50);

    var circle = new Path2D();
    circle.arc(100, 35, 20, 0, 2 * Math.PI);

    var circle2 = new Path2D(circle);//克隆一个
    circle2.lineTo(300,300);

    ctx.stroke(rectangle);
    ctx.fill(circle);

    ctx.save();
    ctx.translate(0,40);
    ctx.stroke(circle2);
    ctx.restore();




</script>
</body>
</html>